<template>
  <view v-if="show" class="add-miniprogram" :style="overlayStyle">
    <view :style="triangleStyle" />
    <view :style="panelStyle">
      <view class="title">下次可以这样找到我</view>
      <view class="setup setup1">
        <view>1.点击右上角“更多”</view>
        <image :src="dotImage" />
      </view>
      <view class="setup setup2">
        <view>2.点击“添加到我的小程序”</view>
        <image :src="addMiniprogramImage" />
      </view>
      <view class="setup setup3">
        <view>3.微信首页下拉，即可快速查看</view>
        <view class="operat">
          <text class="ok" @click.stop="handleClose">我知道了</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

onMounted(() => {
  setTimeout(() => {
    show.value = false
    emit('close')
  }, 15 * 1000)
})
const emit = defineEmits(['close'])
const props = defineProps({
  name: {
    type: String,
    default: '',
  },
  zIndex: {
    type: [Number, String],
    default: 1001,
  },
  navigationStyle: {
    type: String,
    validator(value) {
      return ['default', 'custom'].includes(value)
    },
    default: 'custom',
  },
})

const borderWidth = 10
const { left, bottom, width } = uni.getMenuButtonBoundingClientRect()
const navigationHeight = props.navigationStyle === 'default' ? 0 : bottom + 8
const overlayStyle = {
  position: 'fixed',
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  zIndex: `${props.zIndex}`,
  fontSize: '16px',
  backgroundColor: 'rgba(0, 0, 0, 0.3)',
  animation: 'fadein .3s ease forwards',
}
const triangleStyle = {
  position: 'absolute',
  top: `${navigationHeight - borderWidth}px`,
  left: `${left + Number.parseInt(width / 2) - borderWidth}px`,
  border: `${borderWidth}px solid transparent`,
  borderBottom: `${borderWidth}px solid #fff`,
}
const panelStyle = {
  position: 'absolute',
  top: `${navigationHeight + borderWidth}px`,
  right: '20rpx',
  width: '530rpx',
  height: '530rpx',
  padding: '30rpx',
  boxSizing: 'border-box',
  borderRadius: '20rpx',
  color: '#303030',
  backgroundColor: '#fff',
}
const handleClose = () => {
  show.value = false
  emit('close')
}
const show = ref(false)
uni.checkIsAddedToMyMiniProgram({
  success: (res) => {
    show.value = !res.added
  },
})

const dotImage =
  ''
const addMiniprogramImage =
  ''
</script>

<style lang="scss" scoped>
.add-miniprogram {
  .title {
    font-weight: bold;
    margin-bottom: 30rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .setup {
    font-size: 26rpx;
    margin-bottom: 18rpx;
  }

  .setup1 {
    display: flex;
    align-items: center;

    image {
      width: 60rpx;
      height: 50rpx;
      margin-left: 12rpx;
    }
  }

  .setup2 {
    image {
      width: 100%;
      height: 140rpx;
      margin-top: 18rpx;
    }
  }

  .setup3 {
    margin-bottom: 30rpx;

    .operat {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30rpx;

      .ok {
        display: inline-block;
        width: 360rpx;
        height: 65rpx;
        border-radius: 50rpx;
        text-align: center;
        line-height: 65rpx;
        background: #01beff;
        color: #fff;
      }
    }
  }

  @keyframes fadein {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}
</style>
